<!-- 宠物形象选择页面 -->
<template>
	<view class="pet-avatar-container">
		<!-- 顶部标题 -->
		<!-- <view class="header">
			<view class="back-btn" @tap="goBack">
				<text class="back-icon">&#xe8bb;</text>
			</view>
			<text class="title">选择宠物形象</text>
		</view> -->
		
		<!-- 类别选择 -->
		<view class="avatar-category">
			<view class="category-item" 
				:class="{'active': avatarCategory === 'cat'}" 
				@tap="switchAvatarCategory('cat')">猫咪</view>
			<view class="category-item" 
				:class="{'active': avatarCategory === 'dog'}" 
				@tap="switchAvatarCategory('dog')">狗狗</view>
		</view>
		
		<!-- 宠物名字输入 -->
		<view class="pet-name-section">
			<input 
				class="pet-name-input"
				type="text"
				v-model="petName"
				placeholder="请输入宠物名字"
				maxlength="10"
			/>
		</view>
		
		<!-- 形象列表 -->
		<scroll-view scroll-y class="avatar-list">
			<view class="no-avatars" v-if="filteredAvatars.length === 0">
				<text>暂无可选形象</text>
			</view>
			<view class="avatar-grid">
				<view class="avatar-item" 
					v-for="(item, index) in filteredAvatars" 
					:key="index"
					@tap="selectAvatar(item)"
					:class="{'selected': selectedAvatarId === item.objectId}">
					<image class="avatar-image" :src="item.imageUrl" mode="aspectFit"></image>
					<text class="avatar-name">{{item.species}}</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 底部按钮 -->
		<view class="footer">
			<button class="confirm-btn" @tap="applySelectedAvatar" :disabled="!selectedAvatarId">确认选择</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			petId: '', // 宠物ID
			petType: 'cat', // 默认猫咪
			avatarCategory: 'cat', // 默认显示猫咪类别
			petAvatars: [], // 所有宠物形象
			filteredAvatars: [], // 根据类型过滤后的形象
			selectedAvatarId: '', // 选中的形象ID
			currentAvatar: '', // 当前形象
			isLoading: false,
			petName: '' // 宠物名字
		}
	},
	
	onLoad(options) {
		// 获取参数
		if (options.petId) {
			this.petId = options.petId;
		}
		
		if (options.petType) {
			this.petType = options.petType;
			this.avatarCategory = options.petType;
		}
		
		// 加载宠物信息
		this.loadPetInfo();
		
		// 加载形象列表
		this.loadPetAvatars();
	},
	
	methods: {
		// 加载宠物信息
		async loadPetInfo() {
			if (!this.petId) return;
			
			try {
				const pet = await this.$leanCloud.get('Pet', this.petId);
				if (pet) {
					this.currentAvatar = pet.avatar || '';
					this.petName = pet.name || ''; // 加载宠物名字
				}
			} catch (error) {
				console.error('加载宠物信息失败:', error);
			}
		},
		
		// 加载所有宠物形象
		async loadPetAvatars() {
			try {
				this.isLoading = true;
				const result = await this.$leanCloud.query('PetTemplate');
				this.petAvatars = result.results || [];
				this.filterAvatars();
				
				// 如果有当前形象，设置为选中状态
				if (this.currentAvatar) {
					const currentAvatar = this.petAvatars.find(item => item.imageUrl === this.currentAvatar);
					if (currentAvatar) {
						this.selectedAvatarId = currentAvatar.objectId;
					}
				}
				
				this.isLoading = false;
			} catch (error) {
				console.error('加载宠物形象失败:', error);
				this.petAvatars = [];
				this.isLoading = false;
				
				uni.showToast({
					title: '加载形象失败',
					icon: 'none'
				});
			}
		},
		
		// 切换头像类别
		switchAvatarCategory(category) {
			this.avatarCategory = category;
			this.filterAvatars();
		},
		
		// 过滤可用头像
		filterAvatars() {
			// 将猫咪和狗狗的类别名称映射到英文
			const categoryMap = {
				'猫': 'cat',
				'狗': 'dog'
			};
			
			// 根据选择的类别过滤头像
			this.filteredAvatars = this.petAvatars.filter(item => {
				// 获取模板对应的英文类别
				const templateType = categoryMap[item.category] || '';
				// 根据当前选择的类别过滤
				const currentType = this.avatarCategory;
				return templateType === currentType;
			});
		},
		
		// 选择头像
		selectAvatar(avatar) {
			this.selectedAvatarId = avatar.objectId;
		},
		
		// 应用选中的头像
		async applySelectedAvatar() {
			if (!this.selectedAvatarId || !this.petId) return;
			
			// 验证宠物名字
			if (!this.petName.trim()) {
				uni.showToast({
					title: '请输入宠物名字',
					icon: 'none'
				});
				return;
			}
			
			try {
				uni.showLoading({
					title: '保存中...'
				});
				
				// 获取选中的形象
				const selectedAvatar = this.petAvatars.find(item => item.objectId === this.selectedAvatarId);
				if (!selectedAvatar) {
					throw new Error('未找到选中的形象');
				}
				
				// 更新宠物信息
				await this.$leanCloud.update('Pet', this.petId, {
					avatar: selectedAvatar.imageUrl,
					name: this.petName.trim() // 同时更新宠物名字
				});
				
				uni.showToast({
					title: '更新成功',
					icon: 'success'
				});
				
				// 返回上一页
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			} catch (error) {
				console.error('更新形象失败:', error);
				uni.showToast({
					title: '更新失败',
					icon: 'none'
				});
			} finally {
				uni.hideLoading();
			}
		},
		
		// 返回上一页
		goBack() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss">
.pet-avatar-container {
	min-height: 100vh;
	background-color: #F5F6FA;
	display: flex;
	flex-direction: column;
	
	.header {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #f0f0f0;
		
		.back-btn {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.back-icon {
				font-family: "iconfont";
				font-size: 36rpx;
				color: #333;
			}
		}
		
		.title {
			flex: 1;
			text-align: center;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-right: 60rpx; // 为了居中，抵消返回按钮的宽度
		}
	}
	
	.avatar-category {
		display: flex;
		padding: 20rpx 30rpx;
		background-color: #fff;
		
		.category-item {
			flex: 1;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: #666;
			background: #f8f8f8;
			margin: 0 10rpx;
			border-radius: 12rpx;
			
			&.active {
				background: rgba(139, 92, 255, 0.1);
				border: 2rpx solid #8B5CFF;
				color: #8B5CFF;
			}
		}
	}
	
	.avatar-list {
		flex: 1;
		padding: 20rpx;
		
		.no-avatars {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 300rpx;
			color: #999;
			font-size: 28rpx;
		}
		
		.avatar-grid {
			display: flex;
			flex-wrap: wrap;
			
			.avatar-item {
				width: 31%;
				margin: 1%;
				background: #fff;
				border-radius: 12rpx;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx 0;
				position: relative;
				box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
				
				&.selected::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					border: 4rpx solid #8B5CFF;
					border-radius: 12rpx;
					box-sizing: border-box;
				}
				
				.avatar-image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 60rpx;
					margin-bottom: 10rpx;
				}
				
				.avatar-name {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}
	
	.footer {
		padding: 20rpx 30rpx;
		background: #fff;
		border-top: 1rpx solid #f0f0f0;
		
		.confirm-btn {
			width: 100%;
			height: 90rpx;
			background: #8B5CFF;
			color: #fff;
			border-radius: 45rpx;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			&[disabled] {
				background: #ccc;
			}
		}
	}
	
	/* 宠物名字输入区域 */
	.pet-name-section {
		padding: 20rpx 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		
		.pet-name-input {
			width: 100%;
			height: 80rpx;
			background: #F8F8F8;
			border-radius: 12rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: #333;
			
			&::placeholder {
				color: #999;
			}
		}
	}
}
</style> 